<template>
  <div class="page-content" v-loading="loading">
    <el-row :gutter="20">
      <el-col class="el-col2">
        <el-button type="success" icon="el-icon-refresh" @click="refresh"
          >刷新</el-button
        >
        <el-button type="danger" icon="el-icon-plus" @click="showDialog('add')"
          >新增账号</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="searchdrawer = true"
          >搜索</el-button
        >
        <el-button
          type="warning"
          icon="el-icon-connection"
          @click="showbindqrcode"
          >授权员工账号</el-button
        >
      </el-col>
    </el-row>
    <el-row style="margin-top: 15px">
      <k-table :data="userList" :showPage="false" ref="usertable">
        <el-table-column fixed="left" label="操作" width="260px" key="1">
          <template slot-scope="scope">
            <el-button
              type="text"
              style="color:#ffc107"
              v-if="scope.row.islogin == 1"
              icon="el-icon-close"
              @click="WrittenOfftgzxHandler(scope.row.id, 0)"
            >
              停用
            </el-button>
            <el-button
              type="text"
              style="color:#ff0000"
              v-else
              icon="el-icon-check"
              @click="WrittenOfftgzxHandler(scope.row.id, 1)"
            >
              启用
            </el-button>
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="showDialog('edit', scope.row.id)"
              v-if="scope.row.roles == '管理员'"
            >
              修改
            </el-button>
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="bindDialog(scope.row.id, scope.row.openid)"
              v-else
            >
              绑定
            </el-button>
            <el-button
              type="text"
              style="color: #FA6962"
              icon="el-icon-delete"
              @click="deltgzxHandler(scope.row.id)"
            >
              删除
            </el-button>
            <el-button type="text" style="color: #666666" icon="el-icon-lock">
              权限
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="头像" prop="headimgurl" key="2">
          <template slot-scope="scope">
            <img class="avatar" :src="scope.row.headimgurl" />
          </template>
        </el-table-column>
        <el-table-column label="账号类型" prop="roles" key="3"/>
        <el-table-column label="微信名称" prop="nickname" key="4"/>
        <el-table-column label="手机号/微信ID" prop="username" key="5"/>
        <el-table-column label="联系人" prop="linkman" key="6"/>
        <el-table-column label="业务类型" prop="softtype" key="7"/>
        <el-table-column label="职位" prop="posttype" key="8"/>
        <el-table-column label="分公司" prop="gscode" key="9"/>
        <el-table-column
          label="绑定的操作员"
          prop="operator"
          key="10"/></k-table
    ></el-row>
    <el-drawer
      :visible.sync="searchdrawer"
      direction="ttb"
      size="20%"
      title="搜索"
    >
      <el-col class="el-coler">
        <el-input
          v-model="searchform.keyword"
          placeholder="请输入手机号/微信昵称/联系人/操作员"
          style="max-width: 280px"
          @keyup.enter.native="search"
          ref="keyword"
        >
        </el-input>
        <el-button
          type="primary"
          style="margin-left: 0px"
          icon="el-icon-search"
          @click="search"
        >
          查询
        </el-button>
      </el-col>
    </el-drawer>
    <el-dialog
      :title="dialogTitle"
      width="500px"
      :visible.sync="isAddorEdit"
      @close="closeDialog"
      :close-on-click-modal="false"
    >
      <el-form
        ref="tgzxform"
        :model="tgzxform"
        :rules="rules"
        label-width="100px"
      >
        <el-row>
          <form-input
            label="联系人"
            v-model="tgzxform.linkman"
            prop="linkman"
            placeholder="请填写联系人"
            autocomplete="off"
          ></form-input>
        </el-row>
        <el-row>
          <form-input
            label="手机号"
            v-model="tgzxform.username"
            prop="username"
            placeholder="请填写手机号"
            autocomplete="off"
          ></form-input>
        </el-row>
        <el-row>
          <form-input
            label="密码"
            v-model="tgzxform.pwd"
            type="password"
            prop="pwd"
            autocomplete="off"
            placeholder="请填写密码"
          ></form-input>
        </el-row>
        <el-form-item label="职位：">
          <el-select
            v-model="tgzxform.posttype"
            placeholder="请选择职位"
            prop="posttype"
          >
            <el-option label="老板" value="老板"></el-option>
            <el-option label="总经理" value="总经理"></el-option>
            <el-option label="财务主管" value="财务主管"></el-option>
            <el-option label="采购主管" value="采购主管"></el-option>
            <el-option label="仓库主管" value="仓库主管"></el-option>
            <el-option label="销售经理" value="销售经理"></el-option>
            <el-option label="业务员" value="业务员"></el-option>
            <el-option label="系统管理员" value="系统管理员"></el-option>
            <el-option label="员工" value="员工"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限：" prop="role">
          <el-radio-group v-model="tgzxform.role">
            <el-radio label="管理员"></el-radio>
            <el-radio label="员工"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态：" prop="islogin">
          <el-radio-group v-model="tgzxform.islogin">
            <el-radio label="启用"></el-radio>
            <el-radio label="停用"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button
          type="primary"
          v-if="dvEdit == false"
          @click="AddtgzxHandler('tgzxform')"
          >{{ btntext }}</el-button
        >
        <el-button
          type="primary"
          v-else
          @click="edittgzxHandler(tgzxform.id, 'tgzxform')"
          >{{ btntext }}</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="授权员工账号"
      :visible.sync="bindqrcode"
      width="18%"
      @close="qrcodestop"
      custom-class="qrdig"
    >
      <p><el-image style="width: 210px" :src="bindurl"> </el-image></p>
      <p ref="qrtext">微信扫码授权</p>
    </el-dialog>
    <el-dialog
      title="绑定操作员"
      :visible.sync="bindusers"
      width="500px"
      @close="colsebindusers"
    >
      <el-form ref="usersform" :model="usersform" label-width="100px">
        <el-form-item label="分公司：">
          <el-select
            v-model="usersform.gscode"
            prop="gscode"
            @change="getcompanyusers($event)"
          >
            <el-option
              v-for="(item, index) in companyList"
              :key="index"
              :label="item.gscode"
              :value="item.gscode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作员：">
          <el-select v-model="usersform.operator" prop="operator">
            <el-option
              v-for="(item, index) in usersList"
              :key="index"
              :label="item.operator"
              :value="item.operator"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="bindusers = false">取 消</el-button>
        <el-button type="primary" @click="upusers">保 存</el-button>
      </span>
    </el-dialog>
  </div></template
>

<script>
import { gettgzxUsersApi } from "@/api/userApi";
import { optgzxUserApi } from "@/api/userApi";
import { GettgzxDetailApi } from "@/api/userApi";
import { getxtcompanyApi } from "@/api/userApi";
import { getxtusersApi } from "@/api/userApi";
import { upxtusersApi } from "@/api/userApi";

export default {
  inject: ["reload"],
  data() {
    return {
      isAddorEdit: false,
      dialogTitle: "",
      dvEdit: false,
      bindqrcode: false,
      loading: true,
      page: 1,
      pageSize: 15,
      total: 0,
      userList: [],
      companyList: [],
      usersList: [],
      searchdrawer: false,
      btntext: "",
      bindusers: false,
      searchform: {
        keyword: ""
      },
      usersform: {
        id: "",
        gscode: "",
        operator: "",
        openid: ""
      },
      bindurl: "",
      tgzxform: {
        id: "",
        linkman: "",
        username: "",
        pwd: "",
        posttype: "老板",
        role: "管理员",
        islogin: "启用"
      },
      rules: {
        linkman: [
          { required: true, message: "请填写联系人", trigger: "blur" },
          {
            max: 10,
            message: "姓名长度超出限制，请重新联系人",
            trigger: ["blur", "change"]
          }
        ],
        username: [
          {
            max: 11,
            required: true,
            message: "请输入正确手机号",
            trigger: ["blur", "change"]
          }
        ],
        pwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: ["blur", "change"]
          }
        ]
      }
    };
  },
  mounted() {
    this.UsersData("");
  },
  methods: {
    UsersData(val) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      gettgzxUsersApi({
        guestcode: guestcode,
        gscode: gscode,
        keyword: val,
        username: username,
        userid: userid,
        menuename: "Tg Accountmanguage",
        menucname: "托管账号管理",
        logintype: logintype,
        posttype: posttype,
        op_type: "查询"
      }).then(res => {
        this.loading = false;
        if (res.code == "0") {
          res.data.forEach(element => {
            element.roles = element.roles == 7 ? "管理员" : "员工";
          });
          this.userList = [];
          this.userList = res.data;
        } else {
          this.userList = [];
        }
      });
    },
    search() {
      this.searchdrawer = false;
      this.loading = true;
      this.UsersData(this.searchform.keyword);
    },
    showDialog(type, val) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      this.isAddorEdit = true;
      this.dialogTitle = type === "add" ? "新增账号" : "编辑账号";

      if (type == "add") {
        this.btntext = "添 加";
      }
      if (type == "edit") {
        this.dvEdit = true;
        this.btntext = "保 存";
        this.gettgzxDetailHandler(val);
      }
    },
    showbindqrcode() {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      this.bindqrcode = true;
      this.bindurl =
        "http://wx.inheartsoft.com/2DCode.ashx?cache=1&data=http://wx.inheartsoft.com/tgzxsq/2d_send_sq.aspx?key=" +
        guestcode +
        "&m_p=1";
    },
    closeDialog() {
      this.isAddorEdit = false;
      this.tgzxform.id = "";
      this.tgzxform.linkman = "";
      this.tgzxform.username = "";
      this.tgzxform.pwd = "";
      this.tgzxform.posttype = "";
      this.tgzxform.role = "";
      this.tgzxform.islogin = 0;
      this.resetForm("tgzxform");
    },
    bindDialog(val, topenid) {
      this.bindusers = true;
      this.usersform.id = val;
      this.usersform.openid = topenid;
      this.getcompanyHandler();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    gettgzxDetailHandler(val) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      GettgzxDetailApi({
        guestcode: guestcode,
        gscode: gscode,
        id: val
      }).then(res => {
        if (res.code == "0") {
          this.tgzxform = res.data[0];
          this.tgzxform.role = res.data[0].roles == 7 ? "管理员" : "员工";
          this.tgzxform.islogin = res.data[0].islogin == 1 ? "启用" : "停用";
        }
      });
    },
    WrittenOfftgzxHandler(val, valbool) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      optgzxUserApi({
        guestcode: guestcode,
        gscode: gscode,
        sType: "WrittenOff",
        id: val,
        islogin: valbool,
        menuename: "Tg Accountmanguage",
        menucname: "托管账号管理",
        username: username,
        userid: userid,
        logintype: logintype,
        posttype: posttype,
        op_type: valbool == 0 ? "恢复" : "注销",
        note: val
      }).then(res => {
        if (res.code == "0") {
          if (valbool == 0) {
            this.$message.success("恢复成功");
          } else {
            this.$message.success("注销成功");
          }
          this.UsersData(this.searchform.keyword);
        }
      });
    },
    edittgzxHandler(val, formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let userdata = JSON.stringify(this.$store.state.user.user.info);
          userdata = JSON.parse(userdata);
          let guestcode = userdata.reguserno;
          let gscode = userdata.gscode;
          let username = userdata.userName;
          let userid = userdata.id;
          let logintype = userdata.logintype;
          let posttype = userdata.posttype;
          optgzxUserApi({
            guestcode: guestcode,
            gscode: gscode,
            sType: "Edite",
            linkman: this.tgzxform.linkman,
            username: this.tgzxform.username,
            password: this.tgzxform.pwd,
            posttype: this.tgzxform.posttype,
            role: this.tgzxform.role == "管理员" ? 7 : 8,
            islogin: this.tgzxform.islogin == "启用" ? 1 : 0,
            id: val
          }).then(res => {
            if (res.code == "0") {
              this.$message.success("修改成功");
              this.refresh();
            }
          });
        } else {
          return false;
        }
      });
    },
    AddtgzxHandler(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let userdata = JSON.stringify(this.$store.state.user.user.info);
          userdata = JSON.parse(userdata);
          let guestcode = userdata.reguserno;
          let gscode = userdata.gscode;
          let username = userdata.userName;
          let userid = userdata.id;
          let logintype = userdata.logintype;
          let posttype = userdata.posttype;
          let company = userdata.company;
          optgzxUserApi({
            guestcode: guestcode,
            gscode: gscode,
            sType: "Add",
            linkman: this.tgzxform.linkman,
            username: this.tgzxform.username,
            password: this.tgzxform.pwd,
            posttype: this.tgzxform.posttype,
            role: this.tgzxform.role == "管理员" ? 7 : 8,
            islogin: this.tgzxform.islogin == "启用" ? 1 : 0,
            company: company
          }).then(res => {
            if (res.code == "0") {
              this.$message.success("添加成功");
              this.refresh();
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    deltgzxHandler(val) {
      this.$confirm("您确定要删除当前账号吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      })
        .then(() => {
          let userdata = JSON.stringify(this.$store.state.user.user.info);
          userdata = JSON.parse(userdata);
          let guestcode = userdata.reguserno;
          let gscode = userdata.gscode;
          let username = userdata.userName;
          let userid = userdata.id;
          let logintype = userdata.logintype;
          let posttype = userdata.posttype;
          optgzxUserApi({
            guestcode: guestcode,
            gscode: gscode,
            sType: "Delete",
            id: val
          }).then(res => {
            if (res.code == "0") {
              this.$message.success("删除成功");
              this.UsersData(this.searchform.keyword);
            }
          });
        })
        .catch(() => {});
    },
    getcompanyHandler() {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      getxtcompanyApi({
        guestcode: guestcode
      }).then(res => {
        if (res.code == "0") {
          this.usersform.gscode = res.data[0].gscode;
          this.companyList = res.data;
          getxtusersApi({
            guestcode: guestcode,
            gscode: res.data[0].gscode
          }).then(ures => {
            this.usersform.operator = ures.data[0].operator;
            this.usersList = ures.data;
          });
        }
      });
    },
    getcompanyusers(val) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      getxtusersApi({
        guestcode: guestcode,
        gscode: val
      }).then(res => {
        if (res.code == "0") {
          this.usersform.operator = res.data[0].operator;
          this.usersList = res.data;
        }
      });
    },
    upusers() {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      upxtusersApi({
        guestcode: guestcode,
        gscode: this.usersform.gscode,
        operators: this.usersform.operator,
        id: this.usersform.id,
        openid: this.usersform.openid
      }).then(res => {
        if (res.code == "0") {
          this.$message.success("绑定成功");
          this.UsersData(this.searchform.keyword);
          this.bindusers = false;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    qrcodestop() {
      this.UsersData(this.searchform.keyword);
    },
    colsebindusers() {
      this.usersform.gscode = "";
      this.usersform.operator = "";
    },
    refresh() {
      this.reload();
    }
  }
};
</script>
<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;
  .el-col2 {
    margin-bottom: 10px;
  }
  .el-coler {
    margin-left: 20px;
    margin-top: 20px;
  }
  ::v-deep .el-radio {
    margin-right: 10px;
  }
  ::v-deep .el-checkbox {
    margin-right: 10px;
  }
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .favatar {
    width: 80px;
    height: 80px;
    border-radius: 10%;
  }
  .fname {
    color: #2d8cf0;
  }
}
</style>
<style lang="scss">
.qrdig {
  .el-dialog__body {
    text-align: center;
  }
  p {
    padding-bottom: 5px;
  }
}
</style>
